<template>
  <div class="bank_box" :style="{ height: appHeight-100 + 'px' }">
    <div class="bank_list">
      <div :class="`bank_list_item space_between ${index === 0 ? 'active' : ''}`"
        v-for="(item, index) in myBankList" :key="index">
        <div class="list_item_c">
          <div class="flex list_item_c_bottom">
            <span :class="`net_icon net_icon_${item.usdt_type}`"></span> <span class="txt_right">{{ netWorkArr.find((it) => it.value === item.usdt_type)?.text }}</span>
          </div>
          <div class="flex list_item_c_bottom">
            <span class="address_txt">{{ t('paymentManagement_page_address') }}</span>: <span class="usdt_add txt_right">{{ item.usdt_addr }}</span>
          </div>
          <div class="flex list_item_c_bottom">
            <span class="address_txt">{{ t('paymentManagement_page_remark') }}</span>:
            <div class="txt_ellipsis txt_right">{{ item.desc }}</div>
          </div>
        </div>
        <div class="flex align_center f_wrap list_item_r">
          <span v-if="index === 0" class="flex align_center justify_center">
            {{ t('paymentManagement_page_default_usdt') }}
          </span>
          <template v-else>
             <span class="flex align_center justify_center sh_color" @click="removeBank(item)"> {{
                 t('paymentManagement_page_delete') }} </span>
            <span class="button_color flex align_center justify_center mr_color" @click="doDefaultBank(item)"> {{
          t('paymentManagement_page_set_default') }} </span>

          </template>
        </div>
      </div>

      <div v-if="myBankList?.length < 6 && showAddBtn" class="flex f_wrap align_center justify_center bank_list_item add_bank"
        @click="openAddBank">
        <div class="add_icon">
          <iconpark-icon icon-id="add-f4melk13" size="1.5rem"></iconpark-icon>
        </div>
        <div>{{ t('paymentManagement_page_new_usdt') }}</div>
      </div>

      <div v-if="showAddBtn" class="flex align_center bottom_tip">
        <span class="gth-icon">
          <iconpark-icon icon-id="red" size=".875rem"></iconpark-icon>
        </span>
        {{ t('paymentManagement_page_max_usdt', { num: myBankList?.length || 0 }) }}
      </div>
    </div>
    <!-- </scroll-view> -->
    <!-- 删除弹窗 -->
    <Modal v-model:visible="showDelBankRef" :title="t('paymentManagement_page_tips')">
      <div class="popup_body">
        <div class="form_card">
          <div class="form_container vertical">
            <div class="body vertical center">
              {{ operateType === 'del' ? t('paymentManagement_page_tipContent') :
          t('paymentManagement_page_set_xw_default') }}
            </div>
          </div>
        </div>
        <div class="submit_btn flex justify_center">
          <Btn :disabled="loading" height="44px" width="200px" @click="operateBank" class="submit">
            {{ t('home_page_confirm') }}</Btn>
        </div>
      </div>
    </Modal>
    <!-- 添加银行弹窗 -->
    <AddUsdt ref="addMyBankModal" v-if="showAddBankRef" @getMyBindBankList="getMyBankList"/>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { onMounted, onUnmounted, ref } from "vue";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { NetMsgType } from "@/netBase/NetMsgType";
// import { Net } from "@/net/Net";
import H5Websocket from "@/net/Net1";
import { NetPacket } from "@/netBase/NetPacket";
import { showToast } from "@nutui/nutui";
import Modal from "@/components/Modal.vue";
import Btn from "@/components/Btn.vue";
import AddUsdt from './AddUsdt.vue';
import { netWorkArr } from '@/utils/publicMethods';
import {storeToRefs} from "pinia";
import {User} from "@/store/user.ts";
import pinia from "@/store";

const { t } = useI18n();
const { appHeight } = storeToRefs(User(pinia));
const addMyBankModal = ref();
const showDelBankRef = ref(false);
const showAddBankRef = ref(false);
const showAddBtn = ref(true);
const myBankList: any = ref([]);
const myBankName = ref(); // 如果有已经绑定的银行卡姓名，下次绑定需要一致
const loading = ref(false)
const curOperate = ref({}); // 当前操作的数据
const operateType = ref(); // 操作类型，del 删除，default 设为默认银行卡

// 获取已绑定的usdt地址
const getMyBankList = () => {
  showAddBtn.value = true // 显示添加地址按钮
  loading.value = true
  const req = NetPacket.req_usdt_info_list();
  // Net.instance.sendRequest(req);
  H5Websocket.sendMessageHandler(req);
}
const handleMyBankList = (res: any) => {
  console.log('usdt------', res)
  setTimeout(() => {
    loading.value = false
  }, 300)
  myBankName.value = res.cardholder_name || '';
  showAddBankRef.value = true;
  myBankList.value = res.usdt_info_list.reverse();
}
// 删除银行
const removeBank = (item: any) => {
  operateType.value = 'del';
  showDelBankRef.value = true;
  curOperate.value = item;
  console.log(item);
};
const operateBank = (item: any) => {
  item = curOperate.value;
  loading.value = true
  let req;
  if (operateType.value === 'del') { // 删除
    req = NetPacket.req_del_usdt_info();
  } else { // 设为默认银行卡
    req = NetPacket.req_set_default_usdt();
  }
  req.usdtaddr = `${item.usdt_addr}`;
  // Net.instance.sendRequest(req);
  H5Websocket.sendMessageHandler(req);
}
const handleDelBankList = (res: any) => {
  loading.value = false;
  showDelBankRef.value = false
  if (res.result === 0) {
    showToast.success(t('proxy_page_caoZuo'))
    getMyBankList();
  } else {
    showToast.fail(t('proxy_page_caoZuoFail'))
  }
}
// 设置默认银行
const doDefaultBank = (item: any) => {
  operateType.value = 'default';
  showDelBankRef.value = true;
  curOperate.value = item;
};
// 设置默认银行
const handleDefaultBank = (res: any) => {
  loading.value = false;
  showDelBankRef.value = false
  if (res.result === 0) {
    showToast.success(t('proxy_page_caoZuo'))
    getMyBankList();
  } else {
    showToast.fail(t('proxy_page_caoZuoFail'))
  }
}

// 打开添加银行弹窗
const openAddBank = () => {
  showAddBtn.value = false;
  addMyBankModal.value.showAddBankModal();
}

onMounted(() => {
  setTimeout(() => {
    getMyBankList();
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_usdt_info_list, handleMyBankList);
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_del_usdt_info, handleDelBankList);
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_set_default_usdt, handleDefaultBank);
  }, 500)
});
onUnmounted(() => {
  // 取消监听
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_usdt_info_list, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_del_usdt_info, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_set_default_usdt, null);
});


</script>

<style scoped lang="scss">
.flex {
  display: flex;
}

.space_between {
  justify-content: space-between;
}

.justify_center {
  justify-content: center;
}

.align_center {
  align-items: center;
}

.f_wrap {
  flex-wrap: wrap;
}

.bank_box {
  font-size: 12px;
  padding: 20px 14px 30px;
  min-height: 80px;
  overflow-y: auto;

  .bank_list {
    //background: #100E26;
    //border: 1px solid #2E296B;
    //border-radius: 12px;
    //padding: 16px 12px;

    .bank_list_item {
      position: relative;
      height: 76px;
      padding: 4px 6px 4px 14px;
      margin-bottom: 14px;
      border-radius: 6px;
      background: #1D1C3C;
      border: 1px solid #333260;
      display: flex;

      &::after {
        content: '';
        position: absolute;
        width: 88px;
        height: 33px;
        background: url(/imgs/payment/icon_usdt.webp) center no-repeat;
        background-size: 100%;
        right: 3px;
        bottom: 5px;
      }
      /*默认卡片*/
      &.active {
        border: 2px solid #0CC41E;
      }
      &.add_bank {
        height: 76px;
      }

      .list_item_c {
        width: 78%;
        color: #fff;
          .list_item_c_bottom {
            align-items: center;
            //margin-bottom: 4px;
            .txt_right {
              margin-left: 5px;
            }
            .address_txt {
              margin-left: 0;
              min-width: 30px;
            }
            .net_icon {
              width: 20px;
              height: 20px;
              margin-left: 0;
              margin-right: 11px;
              background: url(/imgs/payment/TRC20.webp) center no-repeat;
              background-size: 100%;
              &.net_icon_2 {
                background-image: url(/imgs/payment/ERC20.webp);
              }
            }
            .usdt_add {
              max-width: 86%;
              display: block;
              word-wrap: break-word;
              line-height: 16px;
            }
          }
      }

      .list_item_r {
        width: 66px;
        color: #fff;
        position: relative;
        z-index: 5;

        span {
          font-size: 2.8vw;
          width: 99px;
          height: 20px;
          background: #131232;
          border-radius: 4px;

          &.sh_color {
            background: #0CC41E;
          }
        }

      }

      &.add_bank {
        &::after {
          background: none;
        }
        >div {
          width: 100%;
          color: #fff;
          text-align: center;
        }

        .add_icon {
          width: 24px;
          height: 24px;
        }
      }

    }

    .bottom_tip {
      font-size: 12px;
      color: #E43939;

      .gth-icon {
        margin-right: 4px;
        width: 14px;
        height: 14px;
      }
    }

  }

}

.popup_body {
  .body {
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 30px;
  }
}
</style>
